<template>
    <view class="form-container">
        <view class="form-header">
            <text class="back-btn" @tap="handleBack">取消</text>
            <text class="header-title">{{ props.eventData ? '编辑日程' : '新建日程' }}</text>
            <!-- <text class="save-btn" @tap="submit">完成</text> -->
        </view>
        
        <form @submit="submit" @reset="reset">
            <view class="form-container">
                <!-- 日期选择区域 -->
                <view class="section-group">
                    <view class="form-item">
                        <text class="label">开始</text>
                        <uni-datetime-picker 
                            v-model="formLocal.beginDate"
                            type="date"
                            class="date-picker"
                        />
                    </view>
                    <view class="divider"></view>
                    <view class="form-item">
                        <text class="label">结束</text>
                        <uni-datetime-picker 
                            v-model="formLocal.endDate"
                            type="date"
                            class="date-picker"
                        />
                    </view>
                </view>

                <!-- 标题和描述区域 -->
                <view class="section-group">
                    <view class="form-item">
                        <text class="label">标题</text>
                        <uni-easyinput
                            v-model="formLocal.title"
                            type="text"
                            placeholder="添加标题"
                            class="input-field"
                        />
                    </view>
                    <view class="divider"></view>
                    <view class="form-item">
                        <text class="label">备注</text>
                        <uni-easyinput
                            v-model="formLocal.description"
                            type="textarea"
                            placeholder="添加备注"
                            :maxlength="200"
                            class="textarea-field"
                        />
                    </view>
                </view>

                <!-- 按钮组 -->
                <view class="button-group">
                    <!-- <button 
                        form-type="reset" 
                        class="action-btn delete-btn"
                        hover-class="btn-hover"
                    >
                        删除日程
                    </button> -->
                    <button 
                        form-type="submit" 
                        class="action-btn submit-btn"
                        hover-class="btn-hover"
                    >
                        完成
                    </button>
                </view>
            </view>
        </form>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
import { creatEventAPI, updateEventAPI } from '@/services/calendar'
import type { CalendarEvent, EventParam } from '@/types/calendar'

interface Props {
    eventData: CalendarEvent
}

const props = defineProps<Props>()


const emit = defineEmits(['on-success', 'on-back'])

// 使用 computed 来创建响应式的数据
const eventData = computed(() => ({
  beginDate: props.eventData.beginDate,
  endDate: props.eventData.endDate,
  title: props.eventData.title,
  description: props.eventData.description
}))

// 创建本地表单数据用于编辑
const formLocal = ref({
  beginDate: '',
  endDate: '',
  title: '',
  description: ''
})

// 监听 props 变化，更新本地表单数据
watch(
  () => props.eventData,
  (newVal) => {
    formLocal.value = {
      beginDate: newVal.beginDate,
      endDate: newVal.endDate,
      title: newVal.title,
      description: newVal.description
    }
  },
  { immediate: true } // 立即执行一次
)

const formData = ref<EventParam>({
    beginDate: '',
    endDate: '',
    title: '',
    description: ''
})


const handleBack = () => {
    emit('on-back')
}


const submit = async () => {
    try {
        formData.value = {
            beginDate: formLocal.value.beginDate,
            endDate: formLocal.value.endDate,
            title: formLocal.value.title,
            description: formLocal.value.description
        }

        if (!formData.value.title.trim()) {
            uni.showToast({
                title: '请输入标题',
                icon: 'none'
            })
            return
        }

        // 判断当前页面是否有地址 id
        if (props.eventData.id) {
            // 修改地址请求
            const res = await updateEventAPI(props.eventData.id, formData.value)
        } else {
            // 新建地址请求
            const res = await creatEventAPI(formData.value)
        }

        // 成功提示
        uni.showToast({ icon: 'success', title: props.eventData.id ? '修改成功' : '添加成功' })
        emit('on-success')

    } catch (error) {
        uni.showToast({ icon: 'error', title: '请填写完整信息' })
    }
}

const reset = () => {
    uni.showModal({
        title: '确认删除',
        content: '是否确认删除该日程？',
        success: (res) => {
            if (res.confirm) {
                emit('on-back')
            }
        }
    })
}
</script>

<style scoped>
.form-container {
    height: 100%;
    background-color: #f2f2f7;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 24rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5ea;
}

.back-btn, .save-btn {
    font-size: 32rpx;
    color: #007aff;
}

.header-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #000;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.section-group {
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
}

.form-item {
    padding: 24rpx;
    display: flex;
    align-items: center;
}

.label {
    width: 100rpx;
    font-size: 32rpx;
    color: #000000;
    font-weight: 400;
}

.divider {
    height: 1rpx;
    background-color: #e5e5ea;
    margin-left: 24rpx;
}

/* 输入框样式 */
:deep(.uni-easyinput__content) {
    border: none !important;
    background-color: transparent !important;
}

:deep(.uni-easyinput__content-input) {
    font-size: 32rpx !important;
    color: #000000 !important;
}

.input-field {
    flex: 1;
}

.textarea-field {
    flex: 1;
    height: 160rpx;
}

/* 日期选择器样式 */
:deep(.uni-date) {
    flex: 1;
}

:deep(.uni-date-editor) {
    border: none !important;
    background-color: transparent !important;
}

:deep(.uni-date-editor--x) {
    font-size: 32rpx !important;
    color: #000000 !important;
}

/* 按钮样式 */
.button-group {
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.action-btn {
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 16rpx;
    font-size: 34rpx;
    font-weight: 500;
    border: none;
}

.submit-btn {
    background-color: #007aff;
    color: #ffffff;
}

.delete-btn {
    background-color: #ffffff;
    color: #ff3b30;
}

.btn-hover {
    opacity: 0.8;
}

/* 占位符样式 */
:deep(.uni-easyinput__placeholder) {
    font-size: 32rpx !important;
    color: #8e8e93 !important;
}
</style>